<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 - 2D 转换</title>
  <style>
    .big {
      width: 300px;
      height: 300px;
      background-color: antiquewhite;
    }

    .box-1 {
      position: relative;
    }

    .small {
      width: 100px;
      height: 100px;
      background-color: aqua;
    }

    .box-1>p {
      margin: 0;
      padding: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: aqua;
      transform: translate(-50%, -50%);
    }

    .box-2 {
      transform: rotate(45deg);
    }

    .avator {
      width: 50px;
      height: 50px;
      border: 2px solid pink;
      border-radius: 50%;
      margin-top: 20px;
    }

    .avator>img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transition: all 1.5s ease-in-out;
    }

    .avator>img:hover {
      cursor: pointer;
      transform: rotate(360deg);
    }

    .arrow {
      position: relative;
      margin-top: 20px;
      width: 200px;
      height: 20px;
      border: 1px solid #8d9bfb;
    }

    .arrow::after {
      content: "";
      position: absolute;
      top: 5px;
      right: 7px;
      width: 6px;
      height: 6px;
      border-right: 1px solid #5a6ef3;
      border-bottom: 1px solid #5a6ef3;
      transform: rotate(45deg);
      transition: all .1s;
    }

    .arrow:hover::after {
      top: 9px;
      transform: rotate(-135deg);
    }

    .ro {
      transform-origin: right top;
      transition: all .5s;
    }

    .ro:hover {
      transform: rotate(180deg);
    }

    .social-btns {
      background: #eee;
      width: 130px;
      margin-top: 20px;
      font-size: 0;
      text-align: center;
    }

    .social-btns .btn {
      position: relative;
      display: inline-block;
      height: 90px;
      width: 90px;
      margin: 0 20px;
      background-color: #fff;
      text-decoration: none;
      line-height: 90px;
      text-align: center;
      overflow: hidden;
      border-radius: 28%;
      box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .1);
      opacity: 0.99;
    }

    .social-btns .btn::before {
      content: "";
      width: 120%;
      height: 120%;
      position: absolute;
      transform: rotate(45deg);
    }

    .social-btns .btn .fa {
      font-size: 38px;
      vertical-align: middle;
    }

    .social-btns .btn.weixin .fa {
      color: #07c160;
    }

    /* 动画过程 */
    .social-btns .btn.weixin::before {
      background-color: #07c160;
    }

    .social-btns .btn,
    .social-btns .btn::before,
    .social-btns .btn .fa {
      transition: all .35s;
      transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
    }

    .social-btns .btn::before {
      top: 90%;
      left: -110%;
    }

    .social-btns .btn .fa {
      transform: scale(0.8);
    }

    .social-btns .btn:focus::before,
    .social-btns .btn:hover::before {
      top: -10%;
      left: -10%;
    }

    .social-btns .btn:focus .fa,
    .social-btns .btn:hover .fa {
      color: #fff;
      transform: scale(1);
    }

    .city {
      width: 400px;
      height: 150px;
      overflow: hidden;
    }

    .city img {
      transition: all .2s;
    }

    .city img:hover {
      transform: scale(1.05);
    }

    .small.com {
      transition: all .4s;
    }

    .com:hover {
      transform: translate(50px, -50px) rotate(180deg) scale(.8);
    }
  </style>

  <!-- 引入 font-awesome/4.7.0 -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
  <h3>一. 2D 转换之移动 translate</h3>
  <code>
    transform: translate(x, y); <br>
    transform: translateX(x); <br>
    transform: translateY(y);
  </code>
  <p>translate 最大的优点: 不会影响其他元素的位置</p>
  <p>translate 对行内元素无效</p>
  <h4>利用移动让盒子实现水平和垂直居中</h4>
  <div class="big box-1">
    <p></p>
  </div>

  <h3>二. 2D 转换之旋转 rotate</h3>
  <code>
      transform: rotate(度数); 顺时针旋转
    </code>

  <div class="small box-2"></div>

  <div class="avator"><img src="img/avator.jpg" alt=""></div>
  <div class="arrow"></div>

  <h3>三. 设置元素转换的中心点</h3>
  <code>
        transform-origin: x y; 默认是 50% 50%
      </code>
  <div class="small ro"></div>

  <h4>案例: 社交平台转发分享动画</h4>
  <div class="social-btns">
    <a href="https://mp.weixin.qq.com/" target="_blank" title="前往微信公众平台" class="btn weixin"><i
        class="fa fa-weixin"></i></a>
  </div>

  <h3>四. 2D 转换之缩放 scale</h3>
  <code>
      transform: scale(w, h); <br>
      transform: scale(倍数); 
    </code>
  <p>缩放优势: 以本身的转换中心点进行缩放且不影响其他元素的位置</p>
  <h4>案例: 图片放大</h4>
  <div class="city"><a href="#"><img src="img/city.png" width="100%" alt=""></a></div>

  <h3>五. 2D 转换的综合写法</h3>
  <p>顺序会改变效果: 注意先写位移</p>
  <div class="small com"></div>
</body>

</html>